/**
 * 功能描述: YwBaseButton组件样式文件
 * @author 赵常畅
 * @date 2022/9/20 9:55
 * @version 1.0
 */

@import '../../style/index';
@import "constant";

// 基础button布局
@mixin btn--layout {
    position: relative;
    display: inline-block;
    height: $--btn-height;
    padding: $--btn-padding;
    line-height: $--btn-line-height;
    > span {
        display: inline-block;
    }
    // 按钮中内容
    &::before {
        position: absolute;
        top: $--btn-before-location;
        right: $--btn-before-location;
        bottom: $--btn-before-location;
        left: $--btn-before-location;
        z-index: $--btn-before-zIndex;
        display: none;
    }
    // 元素获得焦点、激活
    &:focus, &:active {
        span {
            position: relative;
        }
    }
    // 图标样式
    > .ywicon + span,
    > span + .ywicon {
        margin-left: $--btn-icon-margin-left;
    }
    // 元素为空
    &:empty {
        display: inline-block;
        width: $--btn-empty-width;
    }
}
// 基础button样式
@include b(btn) {
    @include btn--layout;
    // 样式
    font-weight: $--btn-font-weight;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: $--btn-border;
    box-shadow: $--btn-box-shadow;
    cursor: pointer;
    transition: $--btn-transition;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: manipulation;
    font-size: $--btn-font-size;
    border-radius: $--btn-border-radius;
    outline: 0;
    // 按钮颜色相关
    @include btn-color($--btn-color, $--btn-border-color, $--btn-background);
    // 按钮内a标签样式
    @include btn-a-style;
    // 鼠标悬浮、获得焦点
    &:hover, &:focus {
        @include btn-color($--btn-hover-color, $--btn-hover-color, $--btn-background);
    }
    // 元素激活
    &:active {
        @include btn-color($--btn-active-color, $--btn-active-color, $--btn-background);
    }
    // 元素激活、鼠标悬浮、获得焦点
    &:hover, &:active, &:focus {
        text-decoration: none;
        background: $--btn-background;
        @include btn-a-style;
    }
    //非禁用
    &:not([disabled]) {
        // 鼠标悬浮
        &:hover {
            text-decoration: none;
        }
        // 元素激活
        &:active {
            outline: 0;
            box-shadow: none;
        }
    }
    // 禁用样式
    &[disabled] {
        // 按钮颜色、边框颜色
        @include btn-color($--btn-disabled-color, $--btn-border-color, $--btn-disabled-background);
        // 阴影
        @include btn-shadow(none, none);
        cursor: not-allowed;
        // 清除鼠标事件
        > * {
            pointer-events: none;
        }
        // 按钮中a标签样式
        @include btn-a-style;
    }
}

// 按钮中只有icon时
@mixin btn-icon-only--layout {
    // 布局
    width: $--btn-height;
    height: $--btn-height;
    padding: $--bnt-icon-only-padding;
    // large button
    &.#{$namespace}-btn-large {
        width: $--btn-large-height;
        height: $--btn-large-height;
        padding: $--bnt-icon-large-only-padding;
    }
    //small button
    &.#{$namespace}-btn-small {
        width: $--btn-small-height;
        height: $--btn-small-height;
        padding: $--bnt-icon-small-only-padding;
    }
    // icon样式
    > .#{$namespace}icon {
        display: flex;
        justify-content: center;
    }
}
@include b(btn-icon-only) {
    // 样式
    @include btn-icon-only--layout;
    font-size: $--btn-large-font-size;
    // 所有元素字体大小
    > * {
        font-size: $--btn-large-font-size;
    }
    border-radius: $--btn-border-radius;
    vertical-align: $--btn-icon-only-vertical;
    // large button
    &.#{$namespace}-btn-large {
        font-size: $--btn-icon-only-large;
        border-radius: $--btn-border-radius;
        // 所有元素字体大小
        > * {
            font-size: $--btn-icon-only-large;
        }
    }
    // small button
    &.#{$namespace}-btn-small {
        font-size: $--btn-font-size;
        border-radius: $--btn-border-radius;
        // 所有元素字体大小
        > * {
            font-size: $--btn-font-size;
        }
    }
}

/* yw-btn-icon-only a标签中icon的样式 */
@mixin btn-icon-only-a--layout {
    // 布局
    > .#{$namespace}icon {
        display: inline;
    }
}
a.#{$namespace}-btn-icon-only {
    // 样式
    vertical-align: $--a-btn-icon-only-vertical;
    // 引入布局
    @include btn-icon-only-a--layout;
}

// large button
@mixin btn-large--layout {
    // 布局
    height: $--btn-large-height;
    padding: $--btn-large-padding;
}
@include b(btn-large) {
    // 样式
    @include btn-large--layout;
    font-size: $--btn-large-font-size;
    border-radius: $--btn-border-radius;
}

// small button
@mixin btn-small--layout {
    // 布局
    height: $--btn-small-height;
    padding: $--btn-small-padding;
}
@include b(btn-small) {
    // 样式
    @include btn-small--layout;
    font-size: $--btn-font-size;
    border-radius: $--btn-border-radius;
}

// a 标签按钮
a {
    // 基础
    &.#{$namespace}-btn {
        line-height: $--a-btn-line-height;
    }
    // large
    &.#{$namespace}-btn-large {
        line-height: $--a-btn-large-line-height;
    }
    // small
    &.#{$namespace}-btn-small {
        line-height: $--a-btn-large-line-height;
    }
}
